<template>
  <wd-navbar 
    :title="title" 
    custom-class="navbar-custom" 
    :bordered="false" 
    safeAreaInsetTop
    left-arrow
    fixed
    placeholder
    @click-left="goBack"
  ></wd-navbar>
  <view class="font-size-[0rpx]">
    <mp-html
      v-if="imageDetail"
      :content="imageDetail"
      :tag-style="{
        div: 'white-space: pre-wrap;',
        span: 'white-space: pre-wrap;',
        p: 'white-space: pre-wrap;',
        img: 'margin:0;width:100%;max-width: 100%;',
      }"
    />
    <view v-else class="flex items-center justify-center py-[100rpx] text-[36rpx] text-[#999]">
      暂无内容
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
import { getEnvBaseUrl } from '@/utils'
import { productDetail } from '@/api/study.js'

const baseUrl = getEnvBaseUrl()

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'ProductDetail',
})

const title = ref('')
const id = ref('')
const imageDetail = ref('')

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

  onLoad((options) => {
    id.value = options.id
    productDetail({ 
      product_id: id.value 
    }).then(res => {
      if(res && res.length > 0) {
        title.value = res[0].title;
        let detail = res[0].detail;
        // 把相对路径的图片地址前面加上 baseUrl
        detail = detail.replace(/src="(\/[^"]*)"/g, `src="${baseUrl}$1"`);
        imageDetail.value = detail;
      } else {
        imageDetail.value = '';
        title.value = '产品详情';
      }
    })
  })
</script>

<style>
page {
  background-color: #F1F1F1;
}
</style>

<style scoped>

</style>
